<template>
  <div>
    <h2>项目相册<span class="title-tips">（上传之后，请点击保存）</span></h2>
    <div class="header">
      <el-button  type="primary" @click="showAddDailog">批量上传</el-button>
      <el-button type="primary" v-if="!chose && list.length>0" @click="choseSome">选择</el-button>
      <el-button type="primary" v-if="chose" @click="deleSome">删除</el-button>
      <el-button  v-if="chose" @click="chose = false">取消</el-button>
    </div>
     <!-- :src= "file+item.id" -->
    <div class="content">
      <div style="margin: 20px; position: relative" v-for="(item, index) in list"  :key="index">
          <el-image
           style="width: 200px; height: 150px"
           :preview-src-list="[file+item.bannerUrl]"
           :src= "file+item.bannerUrl"
           fit="cover">
         </el-image>
         <el-input
          class="text-input"
          type="textarea"
          :rows="2"
          maxlength="50"
          placeholder="请填写图片描述"
          v-model="item.name">
        </el-input>
        <div class="set-item">
          <div class="main-pic" v-if="item.coverType">封面图</div>
          <div class="main-pic-not" v-else @click="setCoverType(item,index)">设为封面图</div>
          <el-select v-model="item.type" placeholder="请选择" class="item-select">
               <el-option
                 v-for="item in picList"
                 :key="item.dictValue"
                 :label="item.dictLabel"
                 :value="item.dictValue">
               </el-option>
           </el-select>
        </div>
        <div class="chose-item" @click="choseDele(item,index)" v-if="chose">
            <div :class="item.check? 'checkoed':'checkoed-not'">
                <i class="el-icon-check"></i>
            </div>
        </div>
      </div>
    </div>

    <!-- :file-list="dialogList" -->
    <el-dialog
    title="添加图片"
    :visible.sync="showDialog"
    width="50%"
    center>
     <div class="dialog-content">
       <el-upload
         class="upload-demo"
         drag
         :file-list="filelist"
         :on-success="upLoadSeccess"
         :on-remove="upLoadRemove"
         :before-upload="beforeUpload"
         :data="{filetype:'户型图片',app:'shulan',module:'1',sourceKey:'1'}"
         :action="uploadImgUrl"
         :accept="'image/*'"
         multiple>
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip" slot="tip">支持拓展名：.jpg .jpeg .png .gif 单个文件不超过5M</div>
        </el-upload>
     </div>
     <div class="footer">
       <el-button @click="showDialog = false">取 消</el-button>
       <el-button type="primary" @click="dialogAdd">确 定</el-button>
     </div>
  </el-dialog>
    <el-button  type="primary" @click="addBanner" class="save-button">保存</el-button>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import {
    saveBanner,
    getBannerList,
    uploadImgUrl
} from '@/api/overseas'
export default {
  props: {
    communityId: {
      type: String
    },
  },
  components: {

  },
  data() {
    return {
      uploadImgUrl,
      filelist: [],
      chose: false,
      picList:[],
      list:[],
      showDialog: false,
      dialogList:[],
      file:uploadImgUrl
    };
  },
  watch: {
    // list: {
    //   handler(n,o){
    //     console.log(n,o)
    //     this.$emit('getIsSave',false);
    //   },
    //   deep: true  // 可以深度检测到 person 对象的属性值的变化
    // }
  },
  mounted(){
    this.loading = this.$loading({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getDicts("overseas_pic").then(response => {
        this.picList = response.data
    });
    this.getBannerList()
  },
  methods: {
    deleSome(){
      let reaDele = this.list.filter(item=>item.check)
      if(reaDele.length==0){
        this.$message({
          message: '请选择需要删除的图片',
          type: 'warning'
        });
        return
      }

      this.$confirm('确定删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.list = this.list.filter(item=>!item.check)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.chose = false;

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
          this.chose = false
        })
    },
    choseDele(item, index){
      let currentCheck = this.list[index].check;
      this.$set(this.list[index],"check", !currentCheck)
    },
    choseSome(){
      this.chose = true
    },
    getBannerList(){
      getBannerList(this.communityId).then(res => {
           this.list = res.data.filter(item=>{
             return(item.bannerType==1 || item.bannerType==null)
           })
           this.loading&&this.loading.close();
      })
    },
    addBanner(){
      console.log(this.list);
      let list = this.list;
      if(list.length >0){
        for (var i = 0; i < list.length; i++) {
           if(!list[i].type){
             this.$message({
               type: 'info',
               message: '请选择图片类型'
             });
             return
           }
           list[i].cover = i + 1;
        }
        // 必须有一项是封面图
       let hasCoverType = list.filter(item => item.coverType==1)
       if(!hasCoverType.length){
         this.$message({
           type: 'info',
           message: '请设置封面图'
         });
         return
      }
    }
    let params = {
        communityId: this.communityId,
        bannerType: 1,
        bannerList: list
      }
      console.log(999,list)
      saveBanner(params).then(res => {
        this.$message({
          type: 'success',
          message: '保存成功'
        });
        this.getBannerList();
        // 维护状态更新
        this.$emit('updateReadyStatus');
      })
    },
    setCoverType(item, index){
       // 1为不是   0为封面图
       let list =  this.list;
       for (var i = 0; i < list.length; i++) {
         if(i==index){
           list[i].coverType = 1
           this.$set(this.list[i],"coverType", 1)
         }else{
           this.$set(this.list[i],"coverType", 0)
         }
       }
    },
    showAddDailog(){
      this.dialogList = [];
      this.filelist  =[]
      this.showDialog = true;
    },
    upLoadSeccess(e){
      // {
      //   fileExtension: "JPG"
      //   fileType: "户型图片"
      //   filename: "1541641182109253.jpg"
      //   id: "0f36e0ac4dcc49b18a003f5d005a043a"
      // }
      this.dialogList = [...this.dialogList,...e];
      console.log(this.dialogList);
    },
    upLoadRemove(e){
      console.log(e);
      // if(typeof e == 'object'){
      //   return;
      // }
      const id = e.response[0].id;
      this.dialogList = this.dialogList.filter(item => item.id!=id)
    },
    beforeUpload(file){
      //字节
      const isLt = file.size / 1024 / 1024 < 5;
      // video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'
       if (['image/png',"image/jpg","image/jpeg","image/gif"].indexOf(file.type) == -1) {
           this.$message.error('请上传符合格式的图片');
           return false;
       }
       if (!isLt) {
           this.$message.error('上传图片大小不能超过5M哦!');
           return false;
       }
    },
    dialogAdd(){
      let list = this.dialogList;
      let newList = [];
      list.map(item => {
        newList.push({
          bannerUrl:item.id,
          name: "",
          bannerType: 1,
          coverType: 0,
        })
      })
      this.list = [...this.list,...newList];
      this.showDialog = false
    },
  }
};
</script>

<style>
  .header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }
  .text-input {
    width: 200px;
    display: block;
  }
  .set-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    margin-top: 20px;
    }
  .main-pic {
    width: 66px;
    height: 30px;
    background-color: #2593fc;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
    font-size: 12px;
    color: #fff
  }
   .main-pic-not {
     width: 66px;
     height: 30px;
     background-color: #eee;
     line-height: 30px;
     text-align: center;
     border-radius: 5px;
     font-size: 12px;
     color: #333
   }
  .item-select {
    flex: 1;
    margin-left: 10px;
    font-size: 12px;
    display: flex;
  }
  .content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .upload {
    margin-right: 20px;
  }
  .dialog-content {
    display: flex;
    justify-content: center;
  }
  .chose-item {
    position: absolute;
    top:5px;
    right: 5px;
  }
  .checkoed {
    width: 30px;
    height: 30px;
    background-color: #2593fc;
    border-radius: 40px;
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    text-align: center;
  }
  .checkoed-not {
    width: 30px;
    height: 30px;
    background-color: #999;
    border-radius: 40px;
    font-size: 20px;
    color: #fff;
    line-height: 30px;
    text-align: center;
  }
  .save-button {
    margin-top: 20px;
  }
  .title-tips{
    font-weight: 400;
    font-size:20px;
  }
</style>
